{include file="common/public/header"}
<style>
    .store-total-container {
        font-size: 14px;
        margin-bottom: 5px;
        letter-spacing: 1px;
    }

    .store-total-container .store-total-icon {
        top: 45%;
        right: 8%;
        font-size: 65px;
        position: absolute;
        color: rgba(255, 255, 255, 1);
    }

    .store-total-container .store-total-item {
        color: #fff;
        line-height: 3em;
        padding: 8px 25px;
        position: relative;
    }

    .store-total-container .store-total-item > div:nth-child(2) {
        font-size: 42px;
        line-height: 42px;
    }

    .button-group {
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
    }

    .log-summary {
        display: flex;
        justify-content: space-between;
    }

    .layui-card .layui-tab-brief .layui-tab-title li.layui-this {
        color: #f30 !important;
    }

    .layui-tab-title .layui-this:after {
        border: none;
    }

    .content {
        padding: 0 16px 0 16px;
    }

    .li-list {
        height: 35px;
        /*     border-bottom: 1px solid #e0e0e0;*/
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .li-item {
        display: flex;
        cursor: pointer;
    }

    .li-item-read {
        font-family: PingFang SC;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 35px;
        color: #7a7a7a;
    }

    .li-time {
        font-family: Lato;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 64px;
        color: #7a7a7a;
    }

    .layui-card-header {
        padding: 0 30px;
        font-weight: 700;
        font-size: 15px;
    }
</style>
<div class="layui-fluid">

    <div class="layui-row layui-col-space15">

        <div class="layui-col-md">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            近7天充值用户中首充用户堆积图
                        </div>
                        <div id="statistics"
                             style="display: inline-block;width: 100%;height:300px;padding: 30px 0;"></div>
                    </div>
                </div>
            </div>
        </div>

        <table id="table"></table>
    </div>

</div>

{include file="common/public/footer" /}
<!--新-->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!--老-->
<!--<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    layui.use(['index', 'table', 'form', 'laydate', 'layarea'], function () {
        var $ = layui.$;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        var layarea = layui.layarea;
        table.render({
            "limit": 15,
            "limits": [10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100],
            "elem": "#table",
            "height": "full",
            "url": "/admin/Statistics/user_recharge_repeatedly.html",
            "page": true,
            "method": "POST",
            "cols": [[
                {"field": "date", "title": "日期", "align": "center", "width": '5%'}]],
            "defaultToolbar": ["filter", "print"]
        });

        // 排序 按钮监听
        table.on('sort()', function (obj) {
            table.reload('table', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field, //排序字段   在接口作为参数字段  field order
                    order: obj.type, //排序方式   在接口作为参数字段  field order
                },
            });
        });

        // toolbar 按钮监听
        table.on('tool()', function (data) {
            var url = layui.$(this).data('url');
            var text = layui.$(this).data('text');
            var param = layui.$(this).data('param');
            if (data.event == 'url') {
                location.href = url + '?id=' + data.data.id;
            } else if (data.event == 'confirm') {
                var url = url + '?id=' + data.data.id;
                confirm(url, text);
            } else if (data.event == 'frame') {
                open_frame(url + '?id=' + data.data.id, text, eval(param));
            } else if (data.event == 'prompt') {
                _prompt(url + '?id=' + data.data.id, text);
            }
        });

        // toolbar_row 按钮监听
        table.on('toolbar()', function (data) {
            var url = layui.$(this).data('url') + '';
            var text = layui.$(this).data('text');
            var param = layui.$(this).data('param');
            if (data.event == 'url') {
                location.href = url;
            } else if (data.event == 'batch') {
                var checked = table.checkStatus('table').data;
                var id = [];
                for (var i = 0; i < checked.length; i++) {
                    id.push(checked[i].id);
                }
                if (id.length == 0) {
                    alert_error('请至少选择一行数据');
                    return false;
                }
                layer.confirm(text, {
                    btn: ['确认', '取消']
                }, function () {
                    Post(url, {id: id}, function (res) {
                        if (res.code == 1) {
                            alert_success(res.msg, function () {
                                table_reload();
                            });
                        } else {
                            alert_error(res.msg);
                        }
                    });
                });
            } else if (data.event == 'confirm') {
                confirm(url, text);
            } else if (data.event == 'frame') {
                open_frame(url, text, eval(param));
            } else if (data.event == 'upload') {
                _upload(url, text);
            }
        });

        // 开关监听
        form.on('switch(table_switch)', function (data) {
            var url = $(data.elem).data('url');
            Post(url, {checked: $(data.elem).is(":checked") ? 1 : 0}, function (res) {
                if (res.code == 1) {
                    table_reload();
                } else {
                    alert_error(res.msg);
                }
            });
        });

        // 行内编辑监听
        table.on('edit()', function (data) {
            Post('/admin/Works/row_edit.html', {id: data.data.id, field: data.field, value: data.value}, function (res) {
                if (res.code == 1) {
                    table_reload();
                } else {
                    alert_error(res.msg);
                }
            });
        });

        //是否在数组内
        function in_array(search,array){
            for(var i in array){
                if(array[i]==search){
                    return true;
                }
            }
            return false;
        }



    });


    // 表格刷新
    function table_reload() {
        var table = layui.table;
        table.reload('table', {
            where: window.where
        })
    }


</script>
<script>
    layui.use(['laypage', 'layer', 'form'], function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //弹窗
        $('.li-item-read').on('click', function () {
            $.ajax({
                url: "advertisement_details",
                type: "post",
                data: {id: $(this).attr("id")},
                dataType: 'json',
                success: function (result) {
                    console.log(result)
                    if (result.code == 1) {
                        //示范一个公告层
                        layer.open({
                            type: 1
                            ,
                            title: false //不显示标题栏
                            ,
                            closeBtn: false
                            ,
                            area: ['600px', '800px']
                            ,
                            shade: 0.8
                            ,
                            id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            ,
                            btn: ['关闭']
                            ,
                            btnAlign: 'c'
                            ,
                            moveType: 1 //拖拽模式，0或者1
                            ,
                            title: '<div style="text-align: center;font-size: 17px;font-weight: 700;">' + result.data.title + '</div>'
                            ,
                            content: '<div style="padding: 30px; line-height: 22px; font-weight: 300;">' + result.data.content + '</div>'
                            ,
                            success: function (layero) {
                                var btn = layero.find('.layui-layer-btn');
                                btn.find('.layui-layer-btn0').attr({
                                    target: '_blank'
                                });
                            }
                        });
                    } else {
                        layer.msg("不好意思，失败了...")
                    }
                }
            });
        });

    });
    var statistics = echarts.init(document.getElementById('statistics'));
    //首次进入渲染数据
    search();
    //搜索
    function search() {
        $.ajax({
            type: 'POST',
            url: "../../api/statistics/recharge_statistics",
            data: {
/*                date: $('#search-date').val(),
                type: 'd'*/
            },
            async: false,
            dataType: 'json',
            success: function (data) {
                output(data)
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {

            }
        });
    }
    // 指定图表的配置项和数据
    function output(data) {
        var nodes = [];
        for (var i=0;i<data.count.length;i++){
            var vote = {
                value: data.count[i], name: data.count[i]
            }
            nodes.push(vote);
        }

        var lineoption = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['当天总充值用户数', '当天首充用户出', '前第1天首充用户数', '前第2天首充用户数', '前第3天首充用户数', '前第4天首充用户数', '前第5天首充用户数', '前第6天首充用户数', '前第7天首充用户数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: data.week
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                }
            ],
            series: [
                {
                    name: '当天总充值用户数',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '当天首充用户出',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '前第1天首充用户数',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '前第2天首充用户数',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '前第3天首充用户数',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '前第4天首充用户数',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '前第5天首充用户数',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '前第6天首充用户数',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '前第7天首充用户数',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        statistics.setOption(lineoption);


    }



    //跳转地址
    function jump_url(url) {
        open_frame(url, '', eval("['90%', '90%']"));
    }
</script>


